<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="codebase/skins/mini.css" type="text/css">
    <script src="codebase/webix.js" type="text/javascript"></script>

    <script src="js/artists.js" type="text/javascript"></script>

    <title>Karaoke Webix</title>
</head>
<body role="document">

<script src="js/interface.js" type="module"></script>
<script type="module">

    // Main

    import {appLayout} from "./js/interface.js";

    webix.ui({
        type: "clean",
        rows: [
            {},
            {cols: [{}, appLayout, {}]},
            {}
        ]
    });

    // Events

    let panelPropertyEvent = $$('panelProperty');

    panelPropertyEvent.setValues({
        name: artists[0].name,
        track: artists[0].tracks[0].name,
        duration: artists[0].tracks[0].duration,
        difficulty: artists[0].tracks[0].difficulty
    });

    let panelLyricsEvents = $$('panelLyrics');

    panelLyricsEvents.setValue(artists[0].tracks[0].lyrics);

    let buttonDeleteList = $$('buttonDeleteList');
    buttonDeleteList.attachEvent("onItemClick", function () {
        webix.confirm("Are you sure in delete list?").then(function () {
            alert("Good");
        }).fail(function () {
            alert("Bad.")
        })
    });

</script>
</body>
</html>
